<template>
  <section class="Customer_box" @click="noneBliBg()">
    <hgroup class="Tele_cancel_buc Customer_Tele_box dipW ju_al bdr">
        <span class="Cust_Text dip ju_al">    
          <em>{{this.custText}}</em>
          <em class="cust_clr">{{this.number}}</em>
        </span>
        <a :href="'tel:'+this.number+''" class="Cust_font cust_clr Cust_clr_font tran_op bdr" :class="{'bg_active':this.BgNUmActive}"  @click.stop="AddNumb()" >{{this.boda}}</a>
    </hgroup>
    <hgroup class="Tele_cancel_buc Customer_cancel dipW ju_al bdr tran_op" @click.stop="remmovecancel()" :class="{'bg_active':this.BgActive}">
        <span class="Cust_font cust_clr">{{this.Cancel}}</span>
    </hgroup>
  </section>
</template>
<script>
export default {
  data(){
    return{
      custText:'您将拨打易点达客服热线:',
      number:'136-8524-5975',
      boda:'拨打',
      Cancel:'取消',
      BgActive:false,
      BgNUmActive:false,
    }
  },
  methods:{
    remmovecancel(){
      // this.BgActive = true;
      this.BgNUmActive = false;
      this.BgActive = false;
       this.$emit('showCustome') 
    },
    AddNumb(){
      this.BgActive = false;
      this.BgNUmActive = true;
      // console.log(22222)
    },
    noneBliBg(){
      this.$emit('showCustome') 
    }
  }
}
</script>
<style lang="scss" scoped>
.Customer_box{
  background: rgba(0,0,0,.6);
  z-index: 70;   //显示
  // overflow-y:hidden;
  // position: relative;
  position: fixed;
  top:0rem;
  left:0rem;
  margin-top:.8rem;
  width: 100%;
  // height: 11.6rem;
  height: 100%;
  // max-height: 100%;
  .Tele_cancel_buc{
    width: 94.7%;
    background: #fff;
    position: relative;
    left:2.65%;
    .Cust_Text{
      height: 0.82rem;
      width: 100%;
      font-size: .24rem;
      color:#666;
      font-family: "Microsoft YaHei";
      
    }
    .cust_clr{
      color:#FF7200;
    }
    .Cust_font{
      font-size: .36rem;
    }
    .Cust_clr_font{
      height: .98rem;
      width: 100%;
      text-align: center;
      line-height: .98rem;
    }
  }
  .Customer_Tele_box{
    height: 1.8rem;
    bottom:-55%;
  }
  .Customer_cancel{
    height: 1rem;
    bottom:-58%;
  }
  .bg_active{
    background: #e5e5e5;
  }
  // .bg_NUmActive{
  //   background: #e5e5e5;    
  // }
  
}

</style>
